<template>
  <div class="container">
    <el-card>
      <el-row>
        <el-col :span="18">
          <el-form :inline="true" class="demo-form-inline" ref="refRorm">
            <el-form-item label="关键字 " label-width="80px">
              <el-input v-model="formInline.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态" label-width="80px">
              <el-select v-model="formInline.state">
                <el-option
                  v-for="item in Status"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="ClearClick">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="success" icon="el-icon-edit" @click="hAdd()"
            >新增标签</el-button
          >
        </el-col>
      </el-row>
      <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon>
      </el-alert>
      <el-table
        :header-cell-style="{ background: '#fafafa', color: '#909399' }"
        :data="list"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="title" label="文章标题">
          <template #default="{ row }">
            {{ row.title }}
            <el-link
              v-if="row.videoURL"
              icon="el-icon-film"
              type="primary"
              :underline="false"
              @click="Clickvideo(row)"
            >
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="{ row }">
            {{ row.state === 0 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="clickView(row)"
              >预览</el-button
            >
            <el-button type="text" size="small" @click="handleClick(row)">{{
              row.state === 1 ? "启用" : "禁用"
            }}</el-button>
            <el-button
            type="text" size="small"
             :disabled="row.state === 0"
             @click="hEdit(row)"
              >修改
            </el-button>
            <el-button
            type="text"
            size="small"
            :disabled="row.state === 0"
            @click="hDel(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 20px; text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="obj.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="obj.pagesize"
        layout="prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 视频  -->
    <el-dialog :visible.sync="videoDialog" @close="downVideo" title="视频">
      <video style="width: 100%" :src="videoURL" controls>
        <source src="movie.mp4" type="video/mp4" />
      </video>
    </el-dialog>
     <!-- 添加或者编辑  -->
    <el-dialog :visible.sync="quillDialog" :title="isEdit?'修改':'添加'" width="800px" @close="handleClose">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="form.title" placeholder="输入文章标题"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <!-- 富文本编辑器 -->
          <quillEditor
            v-model="form.articleBody"
            :options="editorOption"
            @blur="$refs.form.validateField('articleBody')"
          ></quillEditor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="form.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 20px; text-align: right">
          <el-button type="primary" @click="submit">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
 <!-- 预览  -->
    <el-dialog :visible.sync="viewDialog" title="预览" @close ="viewFormDate">
      <h2>{{viewForm.title}}</h2>
      <div class="box">{{viewForm.createTime}}
        <span class="mobile">{{viewForm.username}}</span>
         <i class="el-icon-view"></i>
          <span class="mobile">{{viewForm.visits}}</span>
         </div>
         <el-card >
          <div v-html="viewForm.articleBody"></div>
         </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants.js'
import { list, changeState, update, add, remove } from '@/api/hmmm/articles.js'
// 富文本编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 富文本编辑器
      editorOption: {
        // 占位配置
        placeholder: '请输入文章内容',
        modules: {
          // 配置工具栏
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
              // [{ header: 1 }, { header: 2 }],
              [{ list: 'ordered' }, { list: 'bullet' }],
              [{ indent: '-1' }, { indent: '+1' }],
              ['link', 'image', 'video']
            ]
          }
        }
      },
      // curId: '',
      isEdit: false, // 添加和修改的变量
      Status: status,
      list: [],
      total: 0,
      viewDialog: false, // 预览弹层
      quillDialog: false, // 添加弹层
      videoDialog: false, // 视频弹层
      videoURL: '', // 视频地址
      formInline: {
        keyword: '',
        state: ''
      },
      viewForm: {
        title: '',
        visits: '',
        createTime: '',
        articleBody: '',
        username: ''
      },
      obj: {
        page: 1,
        pagesize: 10
      },
      form: {
        title: '',
        articleBody: '',
        videoURL: null
      },
      rules: {
        title: [{ required: true, message: '请输入面经标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入面经标题', trigger: 'blur' }
        ],
        videoURL: [
          { required: true, message: '请输入视频路径', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.loadlist()
  },
  methods: {
    // 删除
    hDel (id) {
      this.$confirm('你确定要删除吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id: id })
        console.log(res, '删除')
        // if (res.status !== 200) return this.$message.error('删除失败')
        // this.$message.success('删除成功')
        this.loadlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 表单重置数据清空
    handleClose () {
      this.$refs.form.resetFields()
      this.quillDialog = false
      this.form = {
        title: '',
        articleBody: '',
        videoURL: null
      }
    },
    // 关闭弹层清空数据
    viewFormDate () {
      this.viewDialog = false
      this.viewForm = {
        title: '',
        visits: '',
        createTime: '',
        articleBody: '',
        username: ''
      }
    },
    // 点击预览
    clickView (row) {
      this.viewDialog = true
      this.viewForm = { ...row }
    },
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.isEdit ? this.doEdit() : this.doAdd()
      })
    },
    // 添加
    async  doAdd () {
      console.log(this.form, 'this.form')
      try {
        const res = await add(this.form)
        console.log('add', res)
        if (res.status !== 200) return this.$message.error('添加失败')
        this.$message.success('添加成功')
        this.loadlist()
        this.quillDialog = false
      } catch (err) {
        console.log('add', err)
      }
    },
    // 修改
    async doEdit () {
      // console.log(this.form)
      try {
        const res = await update(this.form)
        console.log('update', res)
        if (res.status !== 200) return this.$message.error('修改失败')
        this.$message.success('修改成功')
        this.loadlist()
        this.quillDialog = false
      } catch (err) {
        console.log('update', err)
      }
    },
    // 点击修改数据回显
    hEdit (row) {
      console.log(row)
      this.isEdit = true
      this.quillDialog = true
      this.form = { ...row }
      // this.curId = row.id
    },
    // 点击添加
    hAdd () {
      this.isEdit = false
      this.quillDialog = true
    },
    // 点击视频路径清除
    downVideo () {
      console.log(1)
      this.videoURL = ''
    },
    // 点击开启视频弹层
    Clickvideo (row) {
      this.videoDialog = true
      this.videoURL = row.videoURL
      console.log(row.videoURL)
    },
    // 清除搜索输入框的数据
    ClearClick () {
      this.$refs.refRorm.resetFields()
      this.formInline = {
        keyword: '',
        state: ''
      }
    },
    // 搜索
    onSubmit () {
      this.obj = this.formInline
      this.loadlist()
    },
    // 改变状态
    async handleClick (row) {
      console.log(row)
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      try {
        const res = await changeState({
          id: row.id,
          state: row.state
        })
        console.log('changeState', res)
        // 保存数据
      } catch (err) {
        console.log('changeState', err)
      }
    },
    handleCurrentChange (val) {
      this.obj.page = val
      this.loadlist()
    },
    handleSizeChange (val) {
      this.obj.pagesize = val
      this.page = 1
      this.loadlist()
    },
    // 获取数据列表
    async loadlist () {
      try {
        const res = await list(this.obj)
        console.log('res', res)
        res.data.items.forEach((item) => {
          item.createTime = this.dayjs(item.createTime).format(
            'YYYY-MM-DD HH:mm:ss'
          )
        })
        this.list = res.data.items
        this.total = res.data.counts
        // 保存数据
      } catch (err) {
        console.log('err', err)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 10px;
}
 ::v-deep .ql-editor {
  min-height: 300px;
  min-width: 100px;
}
 ::v-deep .el-input__inner {
    height: 32px;
    line-height: 32px;
    font-size: 12px;
  }
  .el-button--medium {
    padding: 9px 15px;
    font-size: 12px;
  }
  .el-alert {
    margin-bottom: 20px;
  }

  .mobile{
    margin: 0 15px;
  }
  .box{
    margin-bottom: 10px;
  }

</style>
